<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>起名首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="chinese-style.css">
  <style>
    body {
      font-family: "FangSong", "仿宋", "SimSun", "宋体", serif;
      background-color: var(--rice-paper);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      position: relative;
    }
    
    .header {
      padding: 20px;
      position: relative;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .app-logo {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background-color: var(--mountain-green);
    }
    
    .app-name {
      font-size: 24px;
      font-weight: 600;
      color: var(--ink-black);
      letter-spacing: 1px;
    }
    
    .section-title {
      font-weight: 600;
      font-size: 18px;
      color: var(--ink-black);
      margin-bottom: 16px;
      margin-top: 30px;
      position: relative;
      padding-left: 14px;
    }
    
    .section-title:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background-color: var(--mountain-green);
      border-radius: 2px;
    }
    
    .method-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .method-card {
      background-color: var(--rice-paper);
      border-radius: 16px;
      padding: 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--ink-wash-1);
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
    }
    
    .method-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      border-color: var(--mountain-green);
    }
    
    .method-card:active {
      transform: translateY(0);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    
    .method-icon {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .method-icon::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: currentColor;
      opacity: 0.1;
      z-index: -1;
    }
    
    .method-name {
      font-weight: 600;
      font-size: 16px;
      color: var(--ink-black);
      margin-bottom: 4px;
    }
    
    .method-desc {
      font-size: 12px;
      color: var(--ink-gray);
    }
    
    .zodiac-icon {
      color: var(--indigo-blue);
    }
    
    .traditional-icon {
      color: var(--vermilion);
    }
    
    .culture-icon {
      color: var(--indigo-blue);
    }
    
    .premium-icon {
      color: var(--premium-gold);
    }
    
    .hot-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: var(--vermilion);
      color: white;
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
    }
    
    .footer {
      text-align: center;
      padding: 24px 16px;
      color: var(--stone-gray);
      font-size: 12px;
      margin-top: 40px;
      margin-bottom: 80px;
    }
    
    .mountain-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      opacity: 0.03;
    }
    
    .chinese-pattern {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0 A60 60 0 0 1 120 60 A60 60 0 0 1 60 120 A60 60 0 0 1 0 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3Cpath d='M30 60 A30 30 0 0 1 60 30 A30 30 0 0 1 90 60 A30 30 0 0 1 60 90 A30 30 0 0 1 30 60 Z' stroke='%238c8984' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
      opacity: 0.03;
      z-index: -1;
    }
    
    .pattern-top-right {
      top: 0;
      right: 0;
    }
    
    .pattern-bottom-left {
      bottom: 100px;
      left: 0;
    }
    
    .chinese-tab-bar {
      background-color: var(--rice-paper);
      border-top: 1px solid var(--ink-wash-1);
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 8px 0;
      z-index: 10;
    }
    
    .chinese-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
      color: var(--ink-gray);
      transition: all 0.3s;
      text-decoration: none;
    }
    
    .chinese-tab.active {
      color: var(--mountain-green);
    }
    
    .chinese-tab-icon {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }
    
    .chinese-tab-label {
      font-size: 12px;
    }
    
    .page-intro {
      padding: 20px;
      border-radius: 16px;
      margin-bottom: 20px;
      background-color: var(--rice-paper-light);
      border: 1px solid var(--ink-wash-1);
      position: relative;
      overflow: hidden;
    }
    
    .page-intro:before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 C20 30, 50 20, 80 50 C50 80, 20 70, 0 50 Z' fill='%233e3a39' opacity='0.03'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--ink-black);
      margin-bottom: 8px;
    }
    
    .page-desc {
      font-size: 14px;
      color: var(--ink-gray);
      line-height: 1.5;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .fade-in {
      animation: fadeIn 0.6s ease-out forwards;
    }
    
    .fade-in-delay-1 {
      animation-delay: 0.2s;
      opacity: 0;
    }
    
    .fade-in-delay-2 {
      animation-delay: 0.4s;
      opacity: 0;
    }
    
    /* 用户输入表单样式 */
    .user-form {
      background-color: var(--rice-paper);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 30px;
      width: 100%;
      border: 1px solid var(--ink-wash-1);
      position: relative;
      background-image: linear-gradient(to bottom right, rgba(42, 93, 67, 0.02), rgba(31, 74, 124, 0.02));
      overflow: hidden;
    }
    
    .user-form:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 30 Q50 10, 30 30 Q10 50, 30 70 Q50 90, 70 70 Q90 50, 70 30 Z' fill='none' stroke='%232a5d43' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      opacity: 0.15;
    }
    
    .form-group {
      margin-bottom: 20px;
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    
    .form-label {
      display: block;
      font-weight: 600;
      color: var(--ink-black);
      font-size: 16px;
      position: relative;
      padding-left: 12px;
      width: 30%;
      margin-top: 8px;
    }
    
    .form-label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 14px;
      background-color: var(--mountain-green);
      opacity: 0.8;
      border-radius: 1.5px;
    }
    
    .input-container {
      width: 68%;
      text-align: left;
    }
    
    .form-input {
      width: 100%;
      padding: 14px 18px;
      border-radius: 12px;
      border: 1px solid var(--ink-wash-2);
      background-color: rgba(255, 255, 255, 0.6);
      font-family: inherit;
      color: var(--ink-black);
      transition: all 0.3s;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .form-input:focus {
      outline: none;
      border-color: var(--mountain-green);
      box-shadow: 0 0 0 3px rgba(42, 93, 67, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.05);
      background-color: rgba(255, 255, 255, 0.8);
    }
    
    .form-input::placeholder {
      color: var(--stone-gray);
    }
    
    .radio-group {
      display: flex;
      gap: 10px;
      margin-top: 5px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    
    .radio-item {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .radio-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .radio-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: var(--ink-gray);
      padding: 6px 10px;
      border-radius: 10px;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      font-size: 14px;
    }
    
    .radio-label:hover {
      background-color: rgba(42, 93, 67, 0.05);
    }
    
    .radio-custom {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--ink-wash-2);
      margin-right: 6px;
      position: relative;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.8);
    }
    
    .radio-input:checked + .radio-label {
      color: var(--ink-black);
      background-color: rgba(42, 93, 67, 0.08);
    }
    
    .radio-input:checked + .radio-label .radio-custom {
      border-color: var(--mountain-green);
      background-color: white;
    }
    
    .radio-input:checked + .radio-label .radio-custom:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--mountain-green);
    }
    
    /* 复选框样式 */
    .checkbox-group {
      display: flex;
      justify-content: flex-start;
      gap: 15px;
      margin-top: 5px;
    }
    
    .checkbox-item {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .checkbox-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .checkbox-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: var(--ink-gray);
      padding: 6px 10px;
      border-radius: 10px;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      font-size: 14px;
    }
    
    .checkbox-label:hover {
      background-color: rgba(42, 93, 67, 0.05);
    }
    
    .checkbox-custom {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 2px solid var(--ink-wash-2);
      margin-right: 6px;
      position: relative;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.8);
    }
    
    .checkbox-input:checked + .checkbox-label {
      color: var(--ink-black);
      background-color: rgba(42, 93, 67, 0.08);
    }
    
    .checkbox-input:checked + .checkbox-label .checkbox-custom {
      border-color: var(--mountain-green);
      background-color: var(--mountain-green);
    }
    
    .checkbox-input:checked + .checkbox-label .checkbox-custom:after {
      content: "";
      position: absolute;
      width: 5px;
      height: 9px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    
    .toggle-desc {
      font-size: 12px;
      color: var(--stone-gray);
      margin-top: 4px;
      text-align: left;
      line-height: 1.4;
    }
    
    /* 继续按钮和装饰元素样式 */
    .continue-btn {
      background-color: var(--mountain-green);
      color: white;
      font-weight: 600;
      width: 100%;
      padding: 16px 20px;
      border-radius: 12px;
      margin: 30px 0 20px;
      box-shadow: 0 4px 12px rgba(42, 93, 67, 0.2);
      transition: all 0.3s;
      text-align: center;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    
    .continue-btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: all 0.5s;
    }
    
    .continue-btn:hover:before {
      left: 100%;
    }
    
    .continue-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 8px rgba(42, 93, 67, 0.15);
    }
    
    .continue-btn-icon {
      margin-left: 8px;
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .ink-dot-decoration {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--ink-black);
      opacity: 0.05;
    }
    
    .dot-1 {
      top: 20px;
      right: 20px;
    }
    
    .dot-2 {
      bottom: 30px;
      left: 35px;
    }
    
    .dot-3 {
      top: 50%;
      right: 40px;
    }
    
    .dot-4 {
      bottom: 20px;
      right: 120px;
    }
    
    /* 晃动动画 */
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    .shake {
      animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    /* 隐藏和显示样式 */
    .hidden {
      display: none;
    }
    
    .fixed-char-options {
      margin-top: 12px;
      padding: 12px;
      background-color: rgba(42, 93, 67, 0.03);
      border-radius: 12px;
      border: 1px dashed var(--ink-wash-2);
      width: 100%;
    }
    
    .fixed-char-input {
      margin-top: 12px;
    }
    
    .option-title {
      font-weight: 600;
      font-size: 14px;
      color: var(--ink-black);
      margin-bottom: 6px;
      text-align: left;
    }
    
    /* 添加方法卡片选中样式 */
    .method-card.selected {
      border-color: var(--mountain-green);
      background-color: rgba(42, 93, 67, 0.05);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      transform: translateY(-4px);
    }
    
    .method-card.selected .method-icon::after {
      opacity: 0.2;
    }
    
    /* 禁用按钮样式 */
    .continue-btn.disabled {
      background-color: var(--ink-wash-2);
      cursor: not-allowed;
      box-shadow: none;
    }
    
    .continue-btn.disabled:hover:before {
      left: -100%;
    }
    
    .continue-btn.disabled:active {
      transform: none;
    }
    
    /* 错误提示信息样式 */
    .error-tip {
      color: var(--vermilion);
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }
    
    .form-group.error .form-label {
      color: var(--vermilion);
    }
    
    .form-group.error .form-input {
      border-color: var(--vermilion);
      box-shadow: 0 0 0 3px rgba(206, 76, 52, 0.1);
    }
    
    .needs-selection {
      animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
      0% { opacity: 0.7; }
      50% { opacity: 1; }
      100% { opacity: 0.7; }
    }
  </style>
</head>
<body>
  <!-- 背景装饰 -->
  <div class="mountain-bg">
    <img src="images/mountain-bg.svg" alt="山水背景" style="width:100%; height:100%; object-fit:cover;">
  </div>
  
  <div class="chinese-pattern pattern-top-right"></div>
  <div class="chinese-pattern pattern-bottom-left"></div>
  
  <!-- 页面头部 -->
  <header class="header">
    <div class="logo-container">
      <div class="app-logo">
        <img src="images/icons/app-icon.svg" alt="起名" width="24" height="24">
      </div>
      <div class="app-name">国风起名</div>
    </div>
  </header>
  
  <div class="px-5">
    <!-- 页面介绍 -->
    <div class="page-intro fade-in">
      <h1 class="page-title">传承国风，为爱取名</h1>
      <p class="page-desc">为宝宝取个好名字，是爱的表达。我们融合传统文化精髓，为您提供多种起名方式，让每个名字都独具韵味。</p>
    </div>
    
    <!-- 用户基本信息表单 -->
    <form class="user-form fade-in fade-in-delay-1" id="userInfoForm">
      <!-- 姓氏 -->
      <div class="form-group">
        <label class="form-label">姓氏</label>
        <div class="input-container">
          <input type="text" class="form-input" id="surname" placeholder="请输入姓氏(1-3字)" maxlength="3" required>
        </div>
      </div>
      
      <!-- 性别 -->
      <div class="form-group">
        <label class="form-label">性别</label>
        <div class="input-container">
          <div class="radio-group">
            <div class="radio-item">
              <input type="radio" id="gender-male" name="gender" value="male" class="radio-input" checked>
              <label for="gender-male" class="radio-label">
                <span class="radio-custom"></span>
                男
              </label>
            </div>
            <div class="radio-item">
              <input type="radio" id="gender-female" name="gender" value="female" class="radio-input">
              <label for="gender-female" class="radio-label">
                <span class="radio-custom"></span>
                女
              </label>
            </div>
            <div class="radio-item">
              <input type="radio" id="gender-unknown" name="gender" value="unknown" class="radio-input">
              <label for="gender-unknown" class="radio-label">
                <span class="radio-custom"></span>
                未知
              </label>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 名字字数 -->
      <div class="form-group">
        <label class="form-label">名字字数</label>
        <div class="input-container">
          <div class="radio-group">
            <div class="radio-item">
              <input type="radio" id="name-length-single" name="nameLength" value="single" class="radio-input">
              <label for="name-length-single" class="radio-label">
                <span class="radio-custom"></span>
                单字
              </label>
            </div>
            <div class="radio-item">
              <input type="radio" id="name-length-double" name="nameLength" value="double" class="radio-input" checked>
              <label for="name-length-double" class="radio-label">
                <span class="radio-custom"></span>
                双字
              </label>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 是否定字取名 -->
      <div class="form-group" id="fixedCharGroup">
        <label class="form-label">是否定字取名</label>
        <div class="input-container">
          <div class="checkbox-group">
            <div class="checkbox-item">
              <input type="radio" id="fixed-char-yes" name="fixedChar" value="yes" class="checkbox-input">
              <label for="fixed-char-yes" class="checkbox-label">
                <span class="checkbox-custom"></span>
                是
              </label>
            </div>
            <div class="checkbox-item">
              <input type="radio" id="fixed-char-no" name="fixedChar" value="no" class="checkbox-input" checked>
              <label for="fixed-char-no" class="checkbox-label">
                <span class="checkbox-custom"></span>
                否
              </label>
            </div>
          </div>
          <div class="toggle-desc">常用于辈分字取名</div>
          
          <!-- 定字选项 -->
          <div id="fixedCharOptions" class="fixed-char-options hidden">
            <div class="option-title">定字位置</div>
            <div class="radio-group">
              <div class="radio-item">
                <input type="radio" id="fixed-position-middle" name="fixedPosition" value="middle" class="radio-input" checked>
                <label for="fixed-position-middle" class="radio-label">
                  <span class="radio-custom"></span>
                  中间
                </label>
              </div>
              <div class="radio-item">
                <input type="radio" id="fixed-position-end" name="fixedPosition" value="end" class="radio-input">
                <label for="fixed-position-end" class="radio-label">
                  <span class="radio-custom"></span>
                  末尾
                </label>
              </div>
            </div>
            
            <div class="fixed-char-input">
              <div class="option-title">请输入定字</div>
              <input type="text" class="form-input" id="fixedCharValue" placeholder="请输入一个汉字" maxlength="1">
            </div>
          </div>
        </div>
      </div>
      
      <!-- 禁用生僻字 -->
      <div class="form-group">
        <label class="form-label">禁用生僻字</label>
        <div class="input-container">
          <div class="checkbox-group">
            <div class="checkbox-item">
              <input type="radio" id="avoid-rare-yes" name="avoidRare" value="yes" class="checkbox-input" checked>
              <label for="avoid-rare-yes" class="checkbox-label">
                <span class="checkbox-custom"></span>
                是
              </label>
            </div>
            <div class="checkbox-item">
              <input type="radio" id="avoid-rare-no" name="avoidRare" value="no" class="checkbox-input">
              <label for="avoid-rare-no" class="checkbox-label">
                <span class="checkbox-custom"></span>
                否
              </label>
            </div>
          </div>
          <div class="toggle-desc">建议开启，避免识别和书写不便</div>
        </div>
      </div>
      
      <!-- 禁用复杂字 -->
      <div class="form-group">
        <label class="form-label">禁用复杂字</label>
        <div class="input-container">
          <div class="checkbox-group">
            <div class="checkbox-item">
              <input type="radio" id="avoid-complex-yes" name="avoidComplex" value="yes" class="checkbox-input" checked>
              <label for="avoid-complex-yes" class="checkbox-label">
                <span class="checkbox-custom"></span>
                是
              </label>
            </div>
            <div class="checkbox-item">
              <input type="radio" id="avoid-complex-no" name="avoidComplex" value="no" class="checkbox-input">
              <label for="avoid-complex-no" class="checkbox-label">
                <span class="checkbox-custom"></span>
                否
              </label>
            </div>
          </div>
          <div class="toggle-desc">笔画大于15的字，建议开启</div>
        </div>
      </div>
      
      <!-- 装饰墨点 -->
      <div class="ink-dot-decoration dot-1"></div>
      <div class="ink-dot-decoration dot-2"></div>
      <div class="ink-dot-decoration dot-3"></div>
      <div class="ink-dot-decoration dot-4"></div>
    </form>
    
    <!-- 起名方式 -->
    <h2 class="section-title fade-in fade-in-delay-1">起名方式</h2>
    
    <div class="method-grid fade-in fade-in-delay-2" id="methodGrid">
      <div class="method-card" id="zodiacCard" data-method="zodiac">
        <div class="method-icon zodiac-icon">
          <img src="images/icons/zodiac.svg" alt="生肖起名" width="32" height="32">
        </div>
        <div class="method-name">生肖起名</div>
        <div class="method-desc">根据生肖特性，选择吉祥字</div>
      </div>
      
      <div class="method-card" id="traditionalCard" data-method="traditional">
        <div class="method-icon traditional-icon">
          <img src="images/icons/traditional.svg" alt="传统起名" width="32" height="32">
        </div>
        <div class="method-name">传统文化起名</div>
        <div class="method-desc">传统经典国学文化取名</div>
        <div class="hot-badge">热门</div>
      </div>
      
      <div class="method-card" id="cultureCard" data-method="culture">
        <div class="method-icon culture-icon">
          <img src="images/icons/culture.svg" alt="文化典故" width="32" height="32">
        </div>
        <div class="method-name">文化典故起名</div>
        <div class="method-desc">基于历史典故和神话传说</div>
      </div>
      
      <div class="method-card" id="premiumCard" data-method="premium">
        <div class="method-icon premium-icon">
          <img src="images/icons/premium.svg" alt="VIP精品" width="32" height="32">
        </div>
        <div class="method-name">VIP精品起名</div>
        <div class="method-desc">多维度分析，大师级定制</div>
      </div>
    </div>
    
    <!-- 提示信息 -->
    <div id="methodSelectionTip" class="error-tip text-center" style="display: none;">
      请选择一种起名方式
    </div>
    
    <!-- 开始起名按钮 -->
    <button type="button" class="continue-btn disabled" id="continueBtn">
      开始起名
      <span class="continue-btn-icon">
        <i data-lucide="arrow-right" class="w-5 h-5"></i>
      </span>
    </button>
  </div>
  
  <!-- 底部 -->
  <footer class="footer">
    国风起名 © 2023 | 传承国学经典，弘扬传统文化
  </footer>
  
  <!-- 底部导航栏 -->
  <div class="chinese-tab-bar">
    <a href="index.html" class="chinese-tab active">
      <i data-lucide="home" class="chinese-tab-icon"></i>
      <span class="chinese-tab-label">首页</span>
    </a>
    <a href="qiming-free.html" class="chinese-tab">
      <i data-lucide="search-check" class="chinese-tab-icon"></i>
      <span class="chinese-tab-label">测名</span>
    </a>
    <a href="#" class="chinese-tab">
      <i data-lucide="user" class="chinese-tab-icon"></i>
      <span class="chinese-tab-label">我的</span>
    </a>
  </div>
  
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
    
    // 添加基本交互功能
    document.addEventListener('DOMContentLoaded', function() {
      // 表单验证状态
      let formValid = false;
      // 选择的起名方式
      let selectedMethod = null;
      
      // 验证表单并更新按钮状态
      function validateForm() {
        const surname = document.getElementById('surname').value;
        const fixedCharChecked = document.querySelector('input[name="fixedChar"]:checked').value === 'yes';
        let fixedCharValid = true;
        
        if (fixedCharChecked) {
          const fixedCharValue = document.getElementById('fixedCharValue').value;
          fixedCharValid = !!fixedCharValue;
          
          // 更新定字输入框验证状态
          const fixedCharGroup = document.getElementById('fixedCharGroup');
          if (!fixedCharValid) {
            fixedCharGroup.classList.add('error');
            document.getElementById('fixedCharValue').focus();
          } else {
            fixedCharGroup.classList.remove('error');
          }
        }
        
        // 更新姓氏输入框验证状态
        const surnameGroup = document.getElementById('surname').closest('.form-group');
        if (!surname) {
          surnameGroup.classList.add('error');
        } else {
          surnameGroup.classList.remove('error');
        }
        
        // 检查方法选择
        const methodSelectionTip = document.getElementById('methodSelectionTip');
        if (!selectedMethod) {
          methodSelectionTip.style.display = 'block';
          const methodGrid = document.getElementById('methodGrid');
          methodGrid.classList.add('needs-selection');
        } else {
          methodSelectionTip.style.display = 'none';
          const methodGrid = document.getElementById('methodGrid');
          methodGrid.classList.remove('needs-selection');
        }
        
        formValid = !!surname && fixedCharValid;
        
        // 更新按钮状态
        const continueBtn = document.getElementById('continueBtn');
        if (formValid && selectedMethod) {
          continueBtn.classList.remove('disabled');
        } else {
          continueBtn.classList.add('disabled');
        }
        
        return formValid && selectedMethod;
      }
      
      // 为底部导航栏添加点击效果
      const tabItems = document.querySelectorAll('.chinese-tab');
      tabItems.forEach(tab => {
        tab.addEventListener('click', function(e) {
          // 已经在当前页面时阻止导航
          if (this.classList.contains('active') && !this.getAttribute('href').startsWith('#')) {
            e.preventDefault();
            return;
          }
          
          // 添加点击动画效果
          this.style.transform = 'scale(0.95)';
          setTimeout(() => {
            this.style.transform = 'scale(1)';
          }, 100);
        });
      });
      
      // 方法卡片点击处理
      const methodCards = document.querySelectorAll('.method-card');
      methodCards.forEach(card => {
        card.addEventListener('click', function(e) {
          e.preventDefault(); // 阻止默认链接行为
          
          // 取消其他卡片的选中状态
          methodCards.forEach(c => c.classList.remove('selected'));
          
          // 设置当前卡片选中
          this.classList.add('selected');
          selectedMethod = this.getAttribute('data-method');
          
          // 更新表单验证状态
          validateForm();
          
          // 创建水墨扩散效果
          animateCardClick(this, e);
        });
      });
      
      // 卡片点击动画函数
      function animateCardClick(card, e) {
        // 创建水墨扩散效果
        const splash = document.createElement('div');
        splash.style.position = 'absolute';
        splash.style.width = '10px';
        splash.style.height = '10px';
        splash.style.borderRadius = '50%';
        splash.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
        splash.style.transform = 'scale(0)';
        splash.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)';
        
        // 计算点击位置
        const rect = card.getBoundingClientRect();
        splash.style.left = (e.clientX - rect.left) + 'px';
        splash.style.top = (e.clientY - rect.top) + 'px';
        
        card.appendChild(splash);
        
        // 触发动画
        setTimeout(() => {
          splash.style.transform = 'scale(15)';
          splash.style.opacity = '0';
        }, 10);
        
        // 清理动画元素
        setTimeout(() => {
          splash.remove();
        }, 600);
      }
      
      // 处理开始起名按钮点击
      const continueBtn = document.getElementById('continueBtn');
      
      continueBtn.addEventListener('click', function() {
        // 验证表单
        if (!validateForm()) {
          // 如果验证失败，高亮显示错误字段
          if (!document.getElementById('surname').value) {
            const surnameInput = document.getElementById('surname');
            surnameInput.focus();
            surnameInput.classList.add('shake');
            setTimeout(() => {
              surnameInput.classList.remove('shake');
            }, 600);
          }
          
          const fixedCharChecked = document.querySelector('input[name="fixedChar"]:checked').value === 'yes';
          if (fixedCharChecked && !document.getElementById('fixedCharValue').value) {
            const fixedCharInput = document.getElementById('fixedCharValue');
            fixedCharInput.focus();
            fixedCharInput.classList.add('shake');
            setTimeout(() => {
              fixedCharInput.classList.remove('shake');
            }, 600);
          }
          
          if (!selectedMethod) {
            const methodGrid = document.getElementById('methodGrid');
            methodGrid.classList.add('shake');
            setTimeout(() => {
              methodGrid.classList.remove('shake');
            }, 600);
          }
          
          return;
        }
        
        // 如果按钮被禁用，不执行任何操作
        if (this.classList.contains('disabled')) {
          return;
        }
        
        // 收集表单数据
        const formData = {
          surname: document.getElementById('surname').value,
          gender: document.querySelector('input[name="gender"]:checked').value,
          nameLength: document.querySelector('input[name="nameLength"]:checked').value,
          fixedChar: document.querySelector('input[name="fixedChar"]:checked').value === 'yes',
          avoidRare: document.querySelector('input[name="avoidRare"]:checked').value === 'yes',
          avoidComplex: document.querySelector('input[name="avoidComplex"]:checked').value === 'yes',
          method: selectedMethod
        };
        
        // 添加定字相关数据
        if (formData.fixedChar) {
          formData.fixedPosition = document.querySelector('input[name="fixedPosition"]:checked').value;
          formData.fixedCharValue = document.getElementById('fixedCharValue').value;
        }
        
        // 存储数据到本地，便于其他页面访问
        localStorage.setItem('namingFormData', JSON.stringify(formData));
        
        // 创建水墨点击效果
        const splash = document.createElement('div');
        splash.style.position = 'absolute';
        splash.style.width = '10px';
        splash.style.height = '10px';
        splash.style.borderRadius = '50%';
        splash.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
        splash.style.transform = 'scale(0)';
        splash.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)';
        
        // 计算点击位置
        const rect = this.getBoundingClientRect();
        splash.style.left = '50%';
        splash.style.top = '50%';
        
        this.appendChild(splash);
        
        // 触发动画
        setTimeout(() => {
          splash.style.transform = 'scale(15)';
          splash.style.opacity = '0';
        }, 10);
        
        // 跳转到起名结果页面
        setTimeout(() => {
          // 根据选择的方法跳转到不同页面
          const pages = {
            'zodiac': 'zodiac-naming.html',
            'traditional': 'traditional-naming.html',
            'culture': 'culture-naming.html',
            'premium': 'premium-naming.html'
          };
          
          window.location.href = pages[selectedMethod] || 'qiming-free.html';
        }, 400);
      });
      
      // 姓氏输入框恢复正常状态并验证表单
      document.getElementById('surname').addEventListener('input', function() {
        this.style.borderColor = '';
        this.style.boxShadow = '';
        validateForm();
      });
      
      // 定字输入框恢复正常状态并验证表单
      document.getElementById('fixedCharValue').addEventListener('input', function() {
        this.style.borderColor = '';
        this.style.boxShadow = '';
        validateForm();
      });
      
      // 监听名字字数选择变化
      const nameLengthInputs = document.querySelectorAll('input[name="nameLength"]');
      nameLengthInputs.forEach(input => {
        input.addEventListener('change', function() {
          const fixedCharGroup = document.getElementById('fixedCharGroup');
          if (this.value === 'single') {
            fixedCharGroup.classList.add('hidden');
            document.getElementById('fixed-char-no').checked = true;
            document.getElementById('fixedCharOptions').classList.add('hidden');
          } else {
            fixedCharGroup.classList.remove('hidden');
          }
          validateForm();
        });
      });
      
      // 监听定字选择变化
      const fixedCharInputs = document.querySelectorAll('input[name="fixedChar"]');
      fixedCharInputs.forEach(input => {
        input.addEventListener('change', function() {
          const fixedCharOptions = document.getElementById('fixedCharOptions');
          if (this.value === 'yes') {
            fixedCharOptions.classList.remove('hidden');
          } else {
            fixedCharOptions.classList.add('hidden');
          }
          validateForm();
        });
      });
      
      // 监听其他表单控件变化
      document.querySelectorAll('input[name="gender"], input[name="avoidRare"], input[name="avoidComplex"]').forEach(input => {
        input.addEventListener('change', validateForm);
      });
      
      // 初始验证表单
      validateForm();
    });
  </script>
</body>
</html> 